<template>
	<view class="antique_select">
		<view class="content">
			<view class="close" @click="$emit('close')">
				<image :src="`${baseImageUrl}/common/close1.png`"></image>
			</view>
			<view class="title">
				<view>{{item.name}}</view>
			</view>
			<image :src="item.img" class="cover"></image>
			<view class="desc">介绍：{{item.synopsis}}</view>
			<view class="sub_title">添加需要鉴定的古董</view>

			<scroll-view scroll-x class="scroll_box">
				<view class="item" v-for="item in arr_list">
					<image :src="item.product_cover"></image>
				</view>
				<view class="add_img" @click="openPopup">
					<view class="add_box">
						<image :src="`${baseImageUrl}/common/add2.png`" class="icon"></image>
					</view>
				</view>
			</scroll-view>
			<view class="btn" @click="submit">立即鉴定</view>
		</view>

		<u-popup :show="show" bgColor="transparent" mode="center" @close="close">
			<view class="compose_list">
				<view class="close" @click="close">
					<image :src="`${baseImageUrl}/common/close1.png`"></image>
				</view>
				<view class="title">
					<view>
						<image :src="`${baseImageUrl}/common/zw.png`"></image>
						<text>请选择原料</text>
						<image :src="`${baseImageUrl}/common/zw.png`"></image>
					</view>
				</view>
				<scroll-view scroll-x class="scroll_box">
					<view class="item" v-for="item in list">
						<view class="item_cover" @click="selectPopup(item)">
							<image :src="item.product_cover" class="item_cover"></image>
							<image :src="`${baseImageUrl}/common/checked.png`" class="checkbox"
								v-if="ids.includes(item.id)">
							</image>
						</view>
					</view>
				</scroll-view>
				<view class="btn" @click="confirm">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		antiqueMy
	} from '@/request/api.js';
	export default {
		props: {
			item: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				arr_list: [],
				ids: [],
				cover: "",

				show: false,
				list: []
			}
		},
		methods: {
			async openPopup() {
				let {
					antique
				} = await antiqueMy();
				this.list = antique;
				this.show = true;
			},
			close() {
				this.show = false;
			},
			confirm() {
				this.show = false;
			},
			selectPopup(item) {
				let id = item.id;
				const arr_list = this.arr_list;
				let index = arr_list.findIndex(item => item.id == id);
				index > -1 ? arr_list.splice(index, 1) : arr_list.push(item);
				let ids = [];
				arr_list.forEach(item => {
					ids.push(item.id);
				});
				this.arr_list = arr_list;
				this.ids = ids;
			},
			async submit() {
				let ids = this.ids;
				ids.length ? this.$emit('confirm', this.ids) : this.$u.toast("请选择古董");
			}
		}
	}
</script>

<style scoped lang="scss">
	.antique_select {
		.content {
			width: 688rpx;
			height: 1000rpx;
			padding: 30rpx 35rpx 80rpx;
			box-sizing: border-box;
			background: url(#{$baseImageUrl}/bg/688_1000.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			position: relative;

			.close {
				width: 122rpx;
				height: 122rpx;
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				transform: translate(25rpx, -50rpx);
				z-index: 2;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.title {
				width: 256rpx;
				height: 30rpx;
				background: url(#{$baseImageUrl}/home/title.png) no-repeat;
				background-size: 100% 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				view {
					width: 177rpx;
					height: 53rpx;
					line-height: 53rpx;
					text-align: center;
					color: #494338;
					font-size: 42rpx;
					font-weight: 400;
					font-family: LiSu;
					background: url(#{$baseImageUrl}/home/name.png) no-repeat;
					background-size: 100% 100%;
				}
			}

			.cover {
				width: 260rpx;
				height: 260rpx;
				background: rgba(0, 0, 0, .5);
				border-radius: 50%;
			}

			.desc {
				line-height: 36rpx;
				color: #494338;
				font-weight: 400;
				font-size: 28rpx;
				font-family: SimSun;
			}

			.sub_title {
				width: 600rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				color: #494338;
				font-size: 40rpx;
				font-weight: 400;
				font-family: LiSu;
				background: url(#{$baseImageUrl}/bg/title.png) no-repeat;
				background-size: 100% 100%;
			}

			.scroll_box {
				white-space: nowrap;

				.item {
					display: inline-block;
					margin-right: 40rpx;
					width: 150rpx;
					height: 150rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.add_img {
					display: inline-block;
					width: 150rpx;
					height: 150rpx;
					overflow: hidden;

					.add_box {
						width: 100%;
						height: 100%;
						padding: 4rpx;
						box-sizing: border-box;
						background: url(#{$baseImageUrl}/common/add_bg.png) no-repeat;
						background-size: 100% 100%;
						display: flex;
						justify-content: center;
						align-items: center;

						.icon {
							width: 80rpx;
							height: 80rpx;
						}
					}
				}
			}

			.btn {
				width: 204rpx;
				height: 74rpx;
				line-height: 74rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 30rpx;
				font-weight: 400;
				font-family: SimSun;
				background: url(#{$baseImageUrl}/common/btn.png) no-repeat;
				background-size: 100% 100%;
			}
		}
	}

	.compose_list {
		width: 688rpx;
		height: 606rpx;
		padding: 55rpx 60rpx 70rpx;
		box-sizing: border-box;
		background: url(#{$baseImageUrl}/bg/688_606.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		position: relative;

		.close {
			width: 122rpx;
			height: 122rpx;
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			transform: translate(50rpx, -50rpx);
			z-index: 2;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			display: flex;
			justify-content: center;
			align-items: center;

			view {
				height: 30rpx;
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				text {
					color: #494338;
					font-size: 42rpx;
					font-weight: 400;
					font-family: LiSu;
					margin: 0 10rpx;
				}
			}
		}

		.scroll_box {
			white-space: nowrap;

			.item {
				display: inline-block;
				width: 150rpx;
				height: 168rpx;
				margin-right: 60rpx;
				padding-top: 18rpx;
				box-sizing: border-box;

				.item_cover {
					width: 150rpx;
					height: 150rpx;
					padding: 5rpx;
					box-sizing: border-box;
					background: url(#{$baseImageUrl}/bg/372_372.png) no-repeat;
					background-size: 100% 100%;
					position: relative;

					image {
						width: 100%;
						height: 100%;
					}

					.checkbox {
						width: 52rpx;
						height: 52rpx;
						position: absolute;
						top: -18rpx;
						right: -13rpx;
						z-index: 2;
					}
				}

				&:last-child {
					margin: 0;
				}
			}
		}

		.btn {
			width: 204rpx;
			height: 74rpx;
			line-height: 74rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 30rpx;
			font-weight: 400;
			font-family: SimSun;
			background: url(#{$baseImageUrl}/common/btn.png) no-repeat;
			background-size: 100% 100%;
		}
	}
</style>